
const { resolve } = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin")


// 设置nodejs环境变量
// process.env.NODE_ENV = "development"

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "build.js",
        path: resolve(__dirname, "build")
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    // "style-loader",
                    // 取代style-loader,在css-loader处理完毕以后,从js文件中将css提取出来
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    /*
                        css兼容性处理：postcss --> postcss-loader postcss-preset-env
                    */
                    {
                        loader: "postcss-loader",
                        options: {
                            ident: "postcss",
                            plugins: () => [
                                //    postcss插件
                                // 帮助postcss 找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
                                /*
                                  "browserslist": {
                                        // 开发环境-->设置node的环境变量：process.env.NODE_ENV = development
                                        "development": [
                                            "last 1 chrome version",
                                            "last 1 firefox version",
                                            "last 1 safari version"
                                        ],
                                        // 生产环境：默认是生产环境（与mode中的设置无关）
                                        "production": [
                                            ">0.2%",
                                            "not dead",
                                            "not op_mini al"
                                        ]
                                    }
                                */
                                require("postcss-preset-env")()
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        }),
        new MiniCssExtractPlugin({
            filename: "css/build.css"
        })
    ],
    mode: "development"
}